<template>
    <div>
        <div class="content white-block">
            <div class="toolbar">
                <div class="provider">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-input v-model="input" placeholder="请输入" class="input" @keyup.enter="getData"></el-input>
                    <el-button type="primary" @click="system(1)">查询</el-button>
                </div>
                <div class="text-right">
                    <div class="fr">
                        <upload
                            class="upload"
                            :showFileList="false"
                            :action="'/_api/EsbInboundMain/importData'"
                            :fileList.sync="ruleForm.importList"
                            :listType="'picture'"
                            @success="importSuccess"
                            @error="importError"
                            @change="importChange">
                            <template slot="trigger">
                                <el-button type="primary">导入</el-button>
                            </template>
                        </upload>
                        <el-button type="primary" class="upload" @click="exportBtn">导出</el-button>
                    </div>
                </div>
            </div>
            <div class="table mt20">
                <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns"
                               :selection="true"
                               v-loading="loading"
                               @cell-mouse-enter="handClick"
                               @row-click="handleClick"
                               @selectionChange="selectionChange"
                               class="mt20">
                    <template slot="status" slot-scope="scope">
                        <span v-if="scope.row.status === '1'">工作</span>
                        <span v-if="scope.row.status === '0'">注销</span>
                    </template>
                </table-example>
                <page :data="page" v-if="page" class="mt30 page" @jumpPage="system"></page>
            </div>
        </div>
    </div>
</template>

<script>
    import tableExample from '../../components/table'
    import upload from '../../components/upload'
    import page from '../../components/pagination'

    export default {
        data() {
            return {
                ruleForm: {
                    importList: [],
                    exportList: []
                },
                tableData: [],
                header: [
                    {
                        prop: 'servname',
                        label: '服务名称',
                        minWidth: '15%',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servcode',
                        label: '服务编码',
                        minWidth: '15%',
                        align: 'left',
                        tooltip: true
                    },
                    {
                        prop: 'servversion',
                        label: '服务版本',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'status',
                        label: '状态',
                        minWidth: '10%',
                        align: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '服务创建时间',
                        minWidth: '10%',
                        align: 'left'
                    },
                    {
                        prop: 'updateTime',
                        label: '服务更新时间',
                        minWidth: '10%',
                        align: 'left'
                    }
                ],
                slotColumns: ['operation', 'status'],
                options: [
                    {
                        value: '1',
                        label: '服务名称'
                    }, {
                        value: '2',
                        label: '服务编码'
                    }
                ],
                value: '1',
                input: '',
                page: null,
                currentPage: 1,
                pageSize: 10,
                loading: false,
                serviceid: []
            }
        },
        created() {
            let lett = this
            document.onkeydown = function (e) {
                let key = window.event.keyCode
                if (key === 13) {
                    lett.system(1)
                }
            }
        },
        mounted() {
            this.getData()
        },
        methods: {
            // 获取表格数据
            getData() {
                this.loading = true
                this.$http.get('/EsbInboundMain/pageData', {
                    current: this.currentPage,
                    message: this.input,
                    size: this.pageSize,
                    type: this.value
                }).then(result => {
                    this.loading = false
                    this.page = result.data
                    this.tableData = result.data.records
                })
            },
            // 分页
            system(val) {
                this.currentPage = val
                this.getData()
            },
            // 选中多选框
            selectionChange(val) {
                this.serviceid = []
                for (let i = 0; i < val.length; i++) {
                    this.serviceid.push(val[i].serviceid)
                }
            },

            // 导入
            importChange(file, fileList) {
                this.ruleForm.importList = fileList.slice(-1)
            },
            // 导入成功
            importSuccess() {
                this.$message({
                    type: 'success',
                    message: '导入成功!'
                })
                this.getData()
            },
            // 导入失败
            importError() {
                this.$message({
                    type: 'error',
                    message: '导入失败!'
                })
            },

            // 导出文件
            exportBtn() {
                window.open(window.localStorage.getItem('ajaxApi') + '/EsbInboundMain/txtExport?ids=' + this.serviceid)
                setTimeout(this.getData(), 0)
            },
            // 表格点击事件
            handleClick(row) {

            },

            // 表格鼠标移入事件
            handClick(row) {

            }
        },
        components: {
            tableExample,
            upload,
            page
        }
    }
</script>

<style scoped lang="less">
    .content {
        width: 100%;

        .provider {
            span {
                margin-left: .3rem;
            }
        }
    }

    .toolbar {
        .upload {
            float: left;
            margin-left: 0.1rem;
        }
    }
</style>
